<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="table.css" />
</head>

<body>
    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        <h3>常规表格</h3>
        <table>
            <tr data-ng-repeat="x in records.records">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
        <h3>排序表格</h3>
        <table>
            <tr data-ng-repeat="x in records.records|orderBy: 'Country'">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
        <h3>大写过滤表格</h3>
        <table>
            <tr data-ng-repeat="x in records.records">
                <td>{{x.Name|uppercase}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
        <h3>加序号表格</h3>
        <table>
            <tr data-ng-repeat="x in records.records">
                <td>{{$index + 1}}</td>
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>

        <h3>表格(使用ng-if)</h3>
        <table>
            <tr data-ng-repeat="x in records.records">
                <td data-ng-if="$even" style="background-color:#f1f1f1">{{ x.Name }}</td>
                <td data-ng-if="$odd">{{ x.Name }}</td>
                <td data-ng-if="$even" style="background-color:#f1f1f1">{{ x.Country }}</td>
                <td data-ng-if="$odd">{{ x.Country }}</td>
            </tr>
        </table>
        <h3>表格(在&lt;td&gt;使用(a?b:c))</h3>
        <table>
            <tr ng-repeat="x in records.records">
                <td style="{{$even?'background-color:#f1f1f1':''}}">{{ x.Name }}</td>
                <td style="{{$even?'background-color:#f1f1f1':''}}">{{ x.Country }}</td>
            </tr>
        </table>
        <h3>表格(在&lt;tr&gt;使用(a?b:c))</h3>
        <table>
            <tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="x in records.records">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
            </tr>
        </table>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="table.js"></script>
</body>

</html>
